<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html, body{
				height: 100%;
				width: 100%;
			}
			#box{
				position: absolute;
				top: 0;
				left: 0;
				width: 100px;
				height: 100px;
				background: red;
			}
			#box2{
				position: absolute;
				top: 200px;
				left: 200px;
				width: 100px;
				height: 100px;
				background: yellow;
			}
		</style>
		<script>
			window.onload = function(){
				var box = document.getElementById("box")
				
				box.onmousedown = function(event){
					event = event || window.event
					var ol = event.clientX - box.offsetLeft
					var ot = event.clientY - box.offsetTop
					
					document.onmousemove = function(event){
						event = event || window.event
						box.style.left = event.clientX - ol + "px"
						box.style.top = event.clientY - ot + "px"
					}
					
					document.onmouseup = function(){
						document.onmousemove = null
						document.onmouseup = null
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
		<div id="box2"></div>
	</body>
</html>
